<template>
  <div class="big-box">
    <stat></stat>
    <!-- 头部 -->
    <div class="header">
      <div class="menuTab">
        <!-- <div class="menuTab-name" @click="goPersonTotalPage">科技人才</div> -->
        <!-- <div class="menuTab-name" style="margin-left: 1rem" @click="goBack">
          返回
        </div> -->
      </div>
      <div class="backButton" @click="goBack"></div>
      <img src="../../assets/bigScreen/indexHomeHeader.png" alt="" />
      <div class="head-l">
        <img src="../../assets/bigScreen/time.png" alt="" />
        <span>{{ dates }}</span>
      </div>
      <ul class="head-r">
        <li @click="gotoScreen(1)">
          <span>[</span>
          科技研发
          <span>]</span>
        </li>
        <li @click="gotoScreen(2)">
          <span>[</span>
          项目孵化
          <span>]</span>
        </li>
        <li @click="gotoScreen(3)">
          <span>[</span>
          成果转化
          <span>]</span>
        </li>
        <li @click="gotoScreen(4)">
          <span>[</span>
          资本运作
          <span>]</span>
        </li>
        <li @click="gotoScreen(5)">
          <span>[</span>
          知识产权
          <span>]</span>
        </li>
      </ul>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <div class="box-con">
        <div
          class="con-main"
          style="width: 24.5%; height: calc((100% - 2rem) / 3 * 2)"
        >
          <!-- 人才库 -->
          <div class="h4s h4s-ts animate__animated animate__fadeInUp">
            <div class="tit-l">人才库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div
            class="main-box animate__animated animate__fadeInUp"
            style="width: 100%; height: calc(50% - 5rem)"
          >
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon1.png" alt="" />
                </div>
                <div class="totalBox-left-text">人才总数</div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in personTotal"
                    class="number"
                    style="color: #00eefd"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              style="width: 100%; height: calc(100% - 5rem); margin-top: 0.5rem"
            >
              <pieCharts
                :key="chartKey"
                v-if="pieData.length > 0"
                :pieData="pieData"
              ></pieCharts>
            </div>
          </div>
          <!-- 需求库 -->
          <div
            class="h4s h4s-ts animate__animated animate__fadeInUp"
            style="margin-top: 1rem"
          >
            <div class="tit-l">需求库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div
            class="main-box animate__animated animate__fadeInUp"
            style="width: 100%; height: calc(50% - 5rem)"
          >
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon2.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #009dff">
                  需求总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in demandTotal"
                    class="number"
                    style="color: #009dff"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; height: calc(100% - 5rem)">
              <hxaingbian
                :key="chartKey"
                class="animate__animated animate__fadeInUp"
                :xData="xdata"
                :sData="sdata"
                v-if="xdata.length && sdata.length"
              ></hxaingbian>
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div
          class="con-main"
          style="
            width: calc((50% - 3rem));
            height: calc(((100% - 2rem) / 3) * 2);
            margin-top: 1.5rem;
          "
        >
          <div
            class="main-box animate__animated animate__fadeInUp"
            style="border: none"
          >
            <nmgMap
              :key="mapKey"
              :maplist="[]"
              :areaTypeMap="areaTypeMap"
              @getMapList="getMapList"
              style="width: 100%; height: 100%"
            />
            <div class="resetBox" @click="resetMap">重置</div>
            <div class="resetBox" style="top: 45rem; right: 0" @click="goHerf">
              北京分中心
            </div>
          </div>
        </div>
        <div
          class="con-main"
          style="width: 24.5%; height: calc((100% - 2rem) / 3 * 2)"
        >
          <!-- 企业库 -->
          <div class="h4s h4s-ts animate__animated animate__fadeInUp">
            <div class="tit-l">企业库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div
            class="main-box animate__animated animate__fadeInUp"
            style="width: 100%; height: calc(50% - 5rem)"
          >
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon8.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #ffef09">
                  企业总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in companyTotal"
                    class="number"
                    style="color: #ffef09"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="ages-box">
              <div class="ages-box-item">
                <h6 style="margin: 0; color: #1b7ef2">
                  {{ technologyEnterpriseCount }}
                </h6>
                <!-- <img src="../../../assets/bigScreen/achievement1.png" alt=""> -->
              </div>
              <div class="ages-box-item">
                <h6 style="margin: 0">{{ littleEnterpriseCount }}</h6>
                <!-- <img src="../../../assets/bigScreen/achievement2.png" alt=""> -->
              </div>
              <div class="ages-box-item">
                <h6 style="margin: 0; color: #51c81b">
                  {{ yearLeaderEnterpriseCount }}
                </h6>
                <!-- <img src="../../../assets/bigScreen/achievement3.png" alt=""> -->
              </div>
            </div>
          </div>
          <!-- 政策库 -->
          <div
            class="h4s h4s-ts animate__animated animate__fadeInUp"
            style="margin-top: 1rem"
          >
            <div class="tit-l">政策库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div
            class="main-box animate__animated animate__fadeInUp"
            style="width: 100%; height: calc(50% - 5rem)"
          >
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon7.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #f3b13f">
                  政策总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in policyTotal"
                    class="number"
                    style="color: #f3b13f"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              style="width: 100%; height: calc(100% - 5rem); margin-top: 0.5rem"
            >
              <pieCharts
                :key="chartKey"
                v-if="policyPieData.length > 0"
                :pieData="policyPieData"
              ></pieCharts>
            </div>
          </div>
        </div>
        <div class="con-main">
          <div class="h4s animate__animated animate__fadeInUp">
            <div class="tit-l">成果库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div class="main-box animate__animated animate__fadeInUp">
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon3.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #56de4e">
                  成果总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in achievementTotal"
                    class="number"
                    style="color: #56de4e"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; height: calc(100% - 6rem)">
              <srLineAreaOne
                :key="chartKey"
                v-if="linexDataOne.length > 0"
                :xData="linexDataOne"
                :sData="linesDataOne"
              ></srLineAreaOne>
            </div>
          </div>
        </div>
        <div class="con-main">
          <div class="h4s animate__animated animate__fadeInUp">
            <div class="tit-l">机构库</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div class="main-box animate__animated animate__fadeInUp">
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon4.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #8a38f5">
                  机构总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in orgTotal"
                    class="number"
                    style="color: #8a38f5"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; height: calc(100% - 6rem)">
              <srLineAreaTwo
                :key="chartKey"
                v-if="linexDataTwo.length > 0"
                :xData="linexDataTwo"
                :sData="linesDataTwo"
              ></srLineAreaTwo>
            </div>
          </div>
        </div>
        <div class="con-main">
          <div class="h4s animate__animated animate__fadeInUp">
            <div class="tit-l">注册人数</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div class="main-box animate__animated animate__fadeInUp">
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon5.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #fa5151">
                  注册人数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in registerTotal"
                    class="number"
                    style="color: #fa5151"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; height: calc(100% - 6rem)">
              <piBarTwoRegister
                :key="chartKey"
                v-if="registerLinesData.length && registerLines1Data.length"
                :xData="registerLinexData"
                :sData="registerLinesData"
                :s1Data="registerLines1Data"
              ></piBarTwoRegister>
            </div>
          </div>
        </div>
        <div class="con-main">
          <div class="h4s animate__animated animate__fadeInUp">
            <div class="tit-l">平台动态</div>
            <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
          </div>
          <div class="main-box animate__animated animate__fadeInUp">
            <div class="totalBox">
              <div class="totalBox-left">
                <div class="totalBox-left-icon">
                  <img src="../../assets/bigScreen/icon6.png" alt="" />
                </div>
                <div class="totalBox-left-text" style="color: #ffef09">
                  平台动态总数
                </div>
              </div>
              <div class="totlBox-right">
                <div class="numberBox">
                  <div
                    v-for="(item, index) in dynamicTotal"
                    class="number"
                    style="color: #ffef09"
                  >
                    <CountTo
                      :startVal="0"
                      :endVal="item"
                      :separator="false"
                      :duration="2000"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; height: calc(100% - 6rem)">
              <triangleBar
                :key="chartKey"
                v-if="dynamicSData.length > 0"
                :xData="dynamicXData"
                :sData="dynamicSData"
              ></triangleBar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import stat from './component/childComponent/stat.vue'
import { CountTo } from 'vue3-count-to'
import pieCharts from './component/childComponent/pieCharts.vue'
import hxaingbian from './component/childComponent/hxaingbian.vue'
import srLineAreaOne from './component/childComponent/srLineAreaOne.vue'
import srLineAreaTwo from './component/childComponent/srLineAreaTwo.vue'
import piBarTwoRegister from './component/childComponent/piBarTwoRegister.vue'
import triangleBar from './component/childComponent/triangleBar.vue'
import {
  areaTypeMapList,
  policyPieDataList,
  linesDataOneList,
  linexDataOneList,
  linesDataTwoList,
  linexDataTwoList,
  registerLinesDataList,
  registerLines1DataList,
  registerLinexDataList,
  dynamicXDataList,
  ddynamicSDataList,
} from '../bigScreen/areaTypeMap.js'
import nmgMap from './map/nmgMap.vue'

const router = useRouter()

const dates = ref('') // 日期

const params = ref({
  city: undefined,
})

const chartKey = ref(1) // key

onMounted(() => {
  start()
  _getPersonList()
  _getDemandList()
  getCityList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
})
const getMapList = (id) => {
  params.value.city = id
  _getPersonList()
  _getDemandList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
  chartKey.value++
}

const resetMap = () => {
  chartKey.value++
  mapKey.value++
  params.value.city = undefined
  _getPersonList()
  _getDemandList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
}

// 1.1人才库
const personTotal = ref(0) // 人数
const pieData = ref([]) // 人才 饼图
const _getPersonList = () => {
  personTotal.value = [1, 2, 3] // 人才总数
  pieData.value = [
    {
      name: '高端人才',
      value: 111,
    },
    {
      name: '院士专家工作站',
      value: 55,
    },
    {
      name: '草原英才”领军人才',
      value: 49,
    },
    {
      name: '绿色通道”引进人才',
      value: 1598,
    },
  ] // 饼图数据
  // getPersonList(params.value).then(res => {
  //     if(res.code == 200) {
  //         // personTotal.value = res.data.total
  //         personTotal.value = res.data.total ? res.data.total.toString().split('') : []
  //         console.log('@personTotal.value', personTotal.value)
  //         res.data.data.map(item => {
  //             pieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
  // console.log('@pieData.value', pieData.value)
}

// 1.2需求库
const demandTotal = ref(0)
const xdata = ref([])
const sdata = ref([])
const _getDemandList = () => {
  demandTotal.value = [8, 3, 4]
  xdata.value = [
    '科技研发需求',
    '科研人才需求',
    '概念验证需求',
    '中试熟化需求',
    '成果需求',
    '融资需求',
  ]
  sdata.value = [123, 456, 23, 556, 689, 343]
  // getDemandList(params.value).then(res => {
  //     if(res.code == 200) {
  //         demandTotal.value = res.data.total.toString()
  //         console.log('@', demandTotal.value)
  //         res.data.data.map(item => {
  //             xdata.value.push(item.type)
  //             sdata.value.push(item.count)
  //         })
  //     }
  // })
}

// 2.地图
const mapKey = ref(1)
const areaTypeMap = ref([])

// // getCityList().then(res => {
// //     if(res.code == 200) {
// //         areaTypeMap.value = res.data
// //         console.log('@areaTypeMap.value',areaTypeMap.value);
// //     }
// // })
const getCityList = () => {
  areaTypeMap.value = areaTypeMapList
}

// 3.企业库

const companyTotal = ref(0)
const technologyEnterpriseCount = ref(0)
const littleEnterpriseCount = ref(0)
const yearLeaderEnterpriseCount = ref(0)
const _getCompanyList = () => {
  companyTotal.value = [8, 3, 4]
  technologyEnterpriseCount.value = 1887
  littleEnterpriseCount.value = 123
  yearLeaderEnterpriseCount.value = 434
  // getCompanyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         companyTotal.value = res.data.total.toString()
  //         technologyEnterpriseCount.value = res.data.technologyEnterpriseCount
  //         littleEnterpriseCount.value = res.data.littleEnterpriseCount
  //         yearLeaderEnterpriseCount.value = res.data.yearLeaderEnterpriseCount
  //     }
  // })
}

// 4.政策库
const policyTotal = ref(0)
const policyPieData = ref([])
const _getPolicyList = () => {
  policyTotal.value = [8, 3, 4]
  policyPieData.value = policyPieDataList
  console.log('@', policyPieData.value)
  // getPolicyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         policyTotal.value = res.data.total.toString()
  //         res.data.data.map(item => {
  //             policyPieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
}

// 5.成果库
const achievementTotal = ref(0)
const linesDataOne = ref([])
const linexDataOne = ref([])
const _getAchievementList = () => {
  achievementTotal.value = [8, 3, 4]
  linesDataOne.value = linesDataOneList
  linexDataOne.value = linexDataOneList
  // getAchievementList(params.value).then(res => {
  //     achievementTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataOne.value.push(item.type)
  //         linesDataOne.value.push(item.count)
  //     })
  // })
}

// 6.机构库
const orgTotal = ref(0)
const linesDataTwo = ref([])
const linexDataTwo = ref([])
const _getOrgList = () => {
  orgTotal.value = [8, 3, 4]
  linesDataTwo.value = linesDataTwoList
  linexDataTwo.value = linexDataTwoList
  // getOrgList(params.value).then(res => {
  //     orgTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataTwo.value.push(item.type)
  //         linesDataTwo.value.push(item.count)
  //     })
  // })
}

// 7.注册人数
const registerTotal = ref(0)
const registerLinesData = ref([])
const registerLines1Data = ref([])
const registerLinexData = ref([])
const _getRegisterList = () => {
  registerTotal.value = [8, 3, 4]
  registerLinesData.value = registerLinesDataList
  registerLines1Data.value = registerLines1DataList
  registerLinexData.value = registerLinexDataList
  // getRegisterList(params.value).then(res => {
  //     registerTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         registerLinesData.value.push(item.registerCount)
  //         registerLines1Data.value.push(item.accreditationCount)
  //         registerLinexData.value.push(item.type)
  //     })
  // })
}

// 8.平台动态
const dynamicTotal = ref(0)
const dynamicXData = ref([])
const dynamicSData = ref([])
const _getDynamicList = () => {
  dynamicTotal.value = [8, 3, 4]
  dynamicXData.value = dynamicXDataList
  dynamicSData.value = ddynamicSDataList
  // getDynamicList(params.value).then(res => {
  //     dynamicTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         dynamicXData.value.push(item.type)
  //         dynamicSData.value.push(item.count)
  //     })
  // })
}

//判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
const check = (val) => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}
const displayTime = () => {
  //获取系统当前的年、月、日、小时、分钟、毫秒
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
    minutes
  )}:${check(seconds)}`
}

//每隔1秒调用一次displayTime函数
const start = () => {
  setInterval(() => {
    displayTime()
  }, 1000) //单位是毫秒
}

// 去科技人才
const goPersonTotalPage = () => {
  router.push({
    path: '/bigScreenNewIndex',
  })
}
// 返回
const goBack = () => {
  router.push({
    path: '/chart',
  })
}
// 切换
const gotoScreen = (act) => {
  console.log(act, 'gxn')
  router.push({
    path: '/bigScreen',
    query: {
      act: act,
    },
  })
}
// 去分拣中心
const goHerf = () => {
  window.location.href = 'https://www.techreform.net/'
}
</script>

<style scoped="scoped" lang="scss">
@font-face {
  font-family: 'ffa';
  src: url(../../assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
  list-style: none;
}
.totalBox {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 95%;
  height: 5rem;
  border: 1px solid #02325a;
  background: rgba(2, 21, 54, 0.6);
  border-radius: 5px;

  .totalBox-left {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 40%;
    height: 100%;
    border-right: 1px solid #02325a;
    padding-left: 2rem;

    .totalBox-left-icon {
      width: 2rem;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .totalBox-left-text {
      font-size: 1.8rem;
      color: #00eefd;
      margin-left: 1rem;
      margin-top: 0.5rem;
    }
  }

  .totlBox-right {
    display: flex;
    justify-content: right;
    width: 60%;
    padding: 0.5rem;

    .numberBox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        font-size: 3.2rem;
        border-radius: 0.5rem;
        text-align: center;
        font-family: 'ffa';
        background: #052557;
        margin-left: 0.5rem;
      }
    }
  }
}

.big-box {
  // background-color: #e7250c;
  background-color: #071c3b;
  height: 100vh;
  overflow: hidden;
  .header {
    text-align: center;
    position: relative;
    // height: 19.1rem;

    .menuTab {
      position: absolute;
      top: 5.5rem;
      left: 30rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      .menuTab-name {
        width: 9rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('../../assets/bigScreen/menu-tab.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }

    .backButton {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30%;
      height: 100%;
      cursor: pointer;
    }

    > img {
      width: 100%;
      max-height: 100%;
      margin-top: -1.1rem;
    }

    .head-l {
      position: absolute;
      top: 6rem;
      left: 3rem;
      font-size: 1.8rem;
      font-weight: normal;
      letter-spacing: 0em;
      color: #fff;
      display: flex;
      align-items: center;

      img {
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 0.6rem;
      }
    }

    .head-r {
      position: absolute;
      top: 6rem;
      right: 3rem;
      display: flex;

      li {
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 2.5rem;
        letter-spacing: 0;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;

        span {
          color: #071c3b;
          margin: 0 0.5rem;
        }
      }

      .act {
        color: #00eefd;

        span {
          color: #00eefd;
        }
      }
    }
  }
  .content {
    height: calc(100vh - 13.6rem);
    padding: 0 3rem 2.5rem;
    // border: 1px solid red;
    .box-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      // border: 1px solid seagreen;
      .con-main {
        width: calc((100% - 3rem) / 4);
        height: calc((100% - 2rem) / 2.9);
        margin-top: 1.5rem;
        // border: 1px solid red;
        .main-box {
          position: relative;
          height: calc(100% - 4.5rem);
          // background-image: url('../../../assets/bigScreen/square-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border: 1px solid #07294c;
          .resetBox {
            position: absolute;
            top: 0;
            right: 0;
            width: 9rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('../../assets/bigScreen/menu-tab.png') no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
            cursor: pointer;
          }
          .ages-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 1rem;
            height: calc(100% - 7rem);
            margin-top: 1rem;
            .ages-box-item {
              width: 33.3%;
              height: 100%;
              background: url('../../assets/bigScreen/achievement1.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
              text-align: center;
              // max-height: 12rem;
              h6 {
                font-size: 4rem;
                font-weight: bold;
                color: #00e0fc;
              }
              img {
                width: 15rem;
                height: 10rem;
              }
            }
            .ages-box-item:nth-child(2) {
              background: url('../../assets/bigScreen/achievement2.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
            }
            .ages-box-item:nth-child(3) {
              background: url('../../assets/bigScreen/achievement3.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
            }
          }
          .titleSmall {
            padding: 2rem;
            div {
              border-left: #00e6ff 0.3rem solid;
              padding-left: 1rem;
              color: #fff;
              line-height: 1;
            }
          }
          .num-box {
            padding: 1rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
            box-sizing: border-box;
            .num-li {
              background: #021536;
              box-sizing: border-box;
              border: 0.1rem solid #02325a;
              border-radius: 0.6rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-left: 1rem;
              padding-right: 0;
              .num-li-l {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 2rem;
                font-weight: normal;
                line-height: 2rem;
                text-align: center;
                display: flex;
                align-items: center;
                letter-spacing: 0;
                color: #ffffff;
                padding: 1rem 0;

                img {
                  width: 8rem;
                  height: 8rem;
                  margin-right: 1.5rem;
                }
              }
            }
          }
          .ct-numk {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .ct-numk-t {
              padding: 1rem 2rem;
              h5 {
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 2.5rem;
                letter-spacing: 0;
                color: #ffffff;
                padding-left: 0.8rem;
                border-left: 0.3rem solid #02e1e2;
              }
              .ct-numk-con {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .ctnumk-li {
                  background-image: url('../../assets/bigScreen/ctnum-bgimg.png');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  width: 18rem;
                  height: 10rem;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  .ctnum {
                    display: flex;
                    justify-content: center;
                    color: #ffdd03;
                    div {
                      font-size: 3rem;
                      font-weight: normal;
                      line-height: 3.2rem;
                      letter-spacing: 0;
                      background-image: url('../../assets/bigScreen/ctnum-bg1.png');
                      background-size: 100% 100%;
                      background-repeat: no-repeat;
                      width: 2.4rem;
                      height: 3.7rem;
                      line-height: 3.7rem;
                      text-align: center;
                      margin: 0 0.05rem;
                    }
                  }
                  .cttit {
                    font-size: 1.2rem;
                    font-weight: normal;
                    line-height: 1.7rem;
                    text-align: center;
                    letter-spacing: 0;
                    color: #ffffff;
                  }
                }
              }
            }
          }
          .lb-box {
            display: flex;
            flex-wrap: wrap;
            padding: 1rem 0;
            height: 100%;

            .lb-box-l {
              width: 50%;
              height: 100%;
              animation: breathing 3s ease-in-out infinite;

              .lbbox-l-t {
                width: 13.9rem;
                height: 14.4rem;
                background-image: url('../../assets/bigScreen/lbtl-bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                color: #fff;
                font-size: 2.4rem;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: auto;

                p {
                  margin: 0;
                  font-size: 1.4rem;
                  font-weight: normal;
                  line-height: 2.4rem;
                  text-align: center;
                  letter-spacing: 0;
                  color: #d0deee;
                }
              }

              .lbbox-r-t {
                background-image: url('../../assets/bigScreen/lbtr-bg.png');
              }

              .lbbox-l-b {
                padding: 0 1rem 0 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-top: 1rem;
                height: calc(100% - 14.4rem - 1rem);

                .lbbox-li {
                  display: flex;
                  align-items: center;
                  margin-bottom: 0.7rem;
                  padding: 0.7rem;
                  background: #061d44;
                  position: relative;

                  .lbbox-imgk {
                    width: 6rem;
                    height: 6.5rem;
                    position: relative;

                    img {
                      width: 100%;
                      height: 100%;
                    }

                    div {
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      width: 100%;
                      height: 2rem;
                      font-size: 1rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #ffffff;
                      text-align: center;
                      line-height: 2rem;
                      background: rgba(91, 198, 200, 0.37);
                    }
                  }

                  .lbbox-textk {
                    margin-left: 1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    h6 {
                      font-size: 1.6rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #00e6ff;
                      margin: 0;
                    }

                    div {
                      font-size: 1.2rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: rgba(255, 255, 255, 0.54);
                    }
                  }

                  .tags {
                    font-size: 1rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    color: #02fbfd;
                    padding: 0.2rem 0.5rem;
                    border-radius: 0.2rem;
                    background: rgba(38, 77, 112, 0.37);
                    border: 0.1rem solid rgba(2, 251, 253, 0.23);
                    position: absolute;
                    top: 0.8rem;
                    right: 0.8rem;
                  }
                }
              }
            }
          }
          .cb-box {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
            .cb-box-t {
              display: flex;
              justify-content: space-around;
              align-items: center;
              .cbbox-t-box {
                h6 {
                  margin: 0;
                  font-size: 1.6rem;
                  font-weight: normal;
                  line-height: 2.2rem;
                  letter-spacing: 0;
                  color: #ffffff;
                  text-align: center;
                }
                .cbbox-t-numk {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 1rem;
                  color: #ffdd03;

                  div {
                    width: 3.9rem;
                    height: 5rem;
                    background: linear-gradient(
                      0deg,
                      #021536 10%,
                      rgba(2, 21, 54, 0.26) 100%
                    );
                    box-sizing: border-box;
                    border: 1px solid;
                    border-image: linear-gradient(
                        180deg,
                        #4192d9 2%,
                        rgba(65, 146, 217, 0.3) 34%,
                        rgba(65, 146, 217, 0.3) 68%,
                        #4192d9 100%
                      )
                      1;
                    box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44),
                      inset 0px 5px 20px 0.5px rgba(43, 46, 52, 0.56);
                    margin: 0 0.3rem;
                    text-align: center;
                    line-height: 5rem;
                    font-size: 3rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    text-shadow: 0 0.4rem 1rem 0 rgba(255, 221, 3, 0.44);
                  }
                }
              }
            }
            .cb-box-b {
              padding: 1rem;
              h5 {
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 2.5rem;
                letter-spacing: 0;
                color: #ffffff;
                padding-left: 0.8rem;
                border-left: 0.3rem solid #02e1e2;
                margin-bottom: 0;
              }
              .cbbox-b-con {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                .cbbox-b-conli {
                  width: calc((100% - 4rem) / 3);
                  h6 {
                    display: flex;
                    align-items: center;
                    margin: 0;
                    img {
                      width: 2.1rem;
                      height: 2.1rem;
                    }
                    span {
                      font-size: 1.4rem;
                      font-weight: normal;
                      letter-spacing: 0;
                      color: #00e6ff;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }
                  .cbbox-b-conli-imgk {
                    margin-top: 1.2rem;
                    height: 9rem;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  p {
                    font-size: 1.2rem;
                    font-weight: normal;
                    letter-spacing: 0;
                    color: rgba(255, 255, 255, 0.54);
                    margin-top: 0.7rem;
                    margin-bottom: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
          .project-box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            padding: 0.5rem 0;
            .project-item {
              display: flex;
              justify-content: left;
              align-items: center;
              width: 50%;
              height: 11rem;
              background: url('../../assets/bigScreen/project-item-bg.png')
                no-repeat;
              background-size: 100% 100%;
              background-position: center;
              padding: 0 3rem;
              .item-left {
                width: 6rem;
                height: 6rem;
                img {
                  width: 100%;
                  height: 100%;
                  animation: fadenum 2s infinite;
                }
              }
              @keyframes fadenum {
                100% {
                  transform: rotate(360deg);
                }
              }
              .item-right {
                margin-left: 1rem;
                .right-title {
                  font-size: 1.4rem;
                  color: #ffffff;
                }
                .right-number {
                  font-size: 2.2rem;
                  color: #ffdd03;
                }
              }
            }
          }
          .declar-box {
            position: relative;
            width: 100%;
            height: 100%;
            background: url('../../assets/bigScreen/declar-bg.png') no-repeat;
            background-size: 100% 100%;
            background-position: center;
            animation: breathing 3s ease-in-out infinite;
            .declarItem1 {
              position: absolute;
              top: 2rem;
              left: 1rem;
            }
            .declarItem2 {
              position: absolute;
              top: 2rem;
              right: 2rem;
            }
            .declarItem3 {
              position: absolute;
              bottom: 1rem;
              left: 1rem;
            }
            .declarItem4 {
              position: absolute;
              bottom: 1rem;
              right: 2rem;
            }
          }
          @keyframes breathing {
            0% {
              transform: scale(1);
            }
            50% {
              transform: scale(0.9);
            }
            100% {
              transform: scale(1);
            }
          }
          .table-box {
            padding-top: 0.1rem;
            .table-head-box {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: 4rem;
              background: rgba(5, 35, 86, 0.42);

              .head-item {
                flex: 1;
                font-size: 1.4rem;
                color: #ffffff;
                text-align: center;
                line-height: 4rem;
              }
            }
            .table-body-box {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: 3.8rem;
              .body-item {
                flex: 1;
                font-size: 1.4rem;
                color: #9e9e9e;
                text-align: center;
                line-height: 3.8rem;
              }
            }
          }
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('../../assets/bigScreen/title-bg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }
  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url('../../assets/bigScreen/title-bg31.png');
}
.h4s-ts2 {
  background-image: url('../../assets/bigScreen/title-bg32.png');
}
</style>
